<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>密码输入器</title>
    <style>
        body {
            margin: 8px;
        }

        #input {
            width: calc(100% - 8px);
            height: 30px;
        }

        #keyboard {
            position: fixed;
            bottom: 0;
            left: 0;
            width: 100vw;
            padding: 10px;
            box-sizing: border-box;
        }

        .keyboard-item {
            width: 50px;
            height: 50px;
            border: 1px solid #eee;
            text-align: center;
        }


        .keyboard-fn-list {
            display: flex;
            align-items: center;
            flex-wrap: wrap;
            margin-bottom: 10px;
        }

        .keyboard-fn {
            line-height: 50px;
        }

        .keyboard-fn.shift.active {
            background-color: #006AFF;
            color: #fff;
        }

        .keyboard-key-list {
            display: flex;
            justify-content: center;
            align-items: center;
            flex-wrap: wrap;
        }

        .keyboard-key::before,
        .keyboard-key::after {
            display: block;
            width: 100%;
            line-height: 25px;
        }

        .keyboard-key::before {
            content: attr(data-shift-key);
        }

        .keyboard-key::after {
            content: attr(data-key);
        }
    </style>
</head>

<body>
    <input id="input" />
    <div id="keyboard">
        <div class="keyboard-fn-list"></div>
        <div class="keyboard-key-list"></div>
    </div>

    <script>
        (function (window) {
            const consoleLog = function (...args) {
                console.log(...args);
            };

            const input = window.document.getElementById('input');
            const keyboard = window.document.getElementById('keyboard');

            const copyToClipboard = function (text) {
                return window.navigator.clipboard.writeText(text);
            };

            let isShiftActive = false
            const fnList = [
                {
                    type: 'shift',
                    label: 'Shift',
                    handler() {
                        isShiftActive = !isShiftActive;
                        const shiftEl = keyboard.querySelector('.keyboard-fn-list>.keyboard-fn.shift');
                        if (isShiftActive) {
                            shiftEl.classList.add('active');
                        } else {
                            shiftEl.classList.remove('active');
                        }
                    },
                },
                {
                    type: 'copy',
                    label: 'Copy',
                    handler() {
                        copyToClipboard(input.value.trim()).then(() => {
                            alert('copy success.');
                        }).catch((err) => {
                            alert('copy failed:\n' + JSON.stringify(err));
                        });
                    },
                },
            ];
            const fnHtml = fnList.map((fn) => '<div class="keyboard-fn keyboard-item ' + fn.type + '" data-type="' + fn.type + '">' + (fn.label || fn.type) + '</div>').join('');
            keyboard.querySelector('.keyboard-fn-list').innerHTML = fnHtml;

            const keys = [
                { key: '`', shiftKey: '~' },
                { key: '1', shiftKey: '!' },
                { key: '2', shiftKey: '@' },
                { key: '3', shiftKey: '#' },
                { key: '4', shiftKey: '$' },
                { key: '5', shiftKey: '%' },
                { key: '6', shiftKey: '^' },
                { key: '7', shiftKey: '&' },
                { key: '8', shiftKey: '*' },
                { key: '9', shiftKey: '(' },
                { key: '0', shiftKey: ')' },
                { key: '-', shiftKey: '_' },
                { key: '=', shiftKey: '+' },

                { key: '[', shiftKey: '{' },
                { key: ']', shiftKey: '}' },
                { key: '\\', shiftKey: '|' },
                { key: ';', shiftKey: ':' },
                { key: '\'', shiftKey: '"' },
                { key: ',', shiftKey: '<' },
                { key: '.', shiftKey: '>' },
                { key: '/', shiftKey: '?' },
            ];
            const keyHtml = keys.map((key) => '<div class="keyboard-key keyboard-item" data-shift-key="' + key.shiftKey + '" data-key="' + key.key + '"></div>').join('');
            keyboard.querySelector('.keyboard-key-list').innerHTML = keyHtml;

            const fnClickHandler = function (target) {
                const type = target.getAttribute('data-type');
                const item = fnList.find((fn) => fn.type === type);
                item.handler();
            };
            const keyClickHandler = function (target) {
                let char;
                if (isShiftActive) {
                    char = target.getAttribute('data-shift-key');
                } else {
                    char = target.getAttribute('data-key');
                }
                input.value += char;
            };

            keyboard.addEventListener('click', (e) => {
                const target = e.target;
                const targetClassName = target.className;
                consoleLog('targetClassName', targetClassName);
                if (targetClassName.includes('keyboard-fn')) {
                    fnClickHandler(target);
                } else if (targetClassName.includes('keyboard-key')) {
                    keyClickHandler(target);
                }
            });
        })(window);
    </script>
</body>

</html>